iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

Follow me! 來一場前端技能樹之旅系列 第 5

[Day 05 - CSS] 玩轉CSS樣式,進入網頁美麗新世界

  • 分享至 

  • xImage
  •  

在上一篇學到了 CSS 的基本語法、使用選擇器以及檔案的套用方法。接著就讓我們來學習如何運用樣式屬性!首先來簡單了解一下 CSS 是如何去進行網頁的排版和調整元素的樣式。

Box Model

在 CSS 裡面,所有 HTML 元素都會由一個盒子構成,這個盒子就稱為 Box Model,針對這個盒子去做調整,就能慢慢建構出網頁想要的排版。

可以用屬性 display 來設定元素的 Box Model 類型,通常會預設成兩種:

display: inline | block;
  • 行內元素 (Inline類型)
    元素不會換行,並且盒子的大小由元素的內容撐開,因此不能設定盒子的寬度和高度。常見的元素有:<a><img><span>...。
  • 區塊元素 (Block類型)
    元素會自動換行,在不設定盒子大小的情況下和包裹它的容器一樣寬,也可以另外設定盒子的寬度和高度。常見的元素有:<h1><p><div>...。

除了 inline / block,display 還有更多設定值可以改變元素的佈局

設定盒子的樣式

盒子分成四個區塊:Content(藍區) / Padding(綠區) / Border(黃區) / Margin(橘區)

試著為四個區塊新增樣式屬性:

  • 設定內容Content 的寬 / 高 / 背景顏色 — width / height / background-color

    width: 150px;
    height: 80px;
    background-color: yellow;
    
  • 設定內邊距Paddingpadding

    padding: 10px;
    
    /* 等同於: 
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    */
    
  • 設定邊框Borderborder

    /* border: 粗細 顏色 樣式 */
    border: 5px blue solid;
    
  • 設定與其他元素的邊距Marginmargin

    margin: 20px;
    
    /* 等同於: 
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    */
    

網頁就是由這樣一個一個的盒子堆砌而成的喔!

盒子寬高的計算方式

盒子預設採用的元素寬高的計算方式還有不一樣?一般情況下,當設定 widthheight ,其實並不是完全代表看到的寬高度,只是設定盒子 Content 的大小,paddingboder 的部分一樣會讓盒子看起來變大,,而這個計算方式就是 Content-box

Content-box 的清況下,設定 width: 200px;height: 100px;

但我們通常會想要直接通過 width / height 就可以直接設定外觀的大小,所以就有了 Border-box,它的寬高設定就會等於 Content + Padding + Border

Border-box 的情況下,設定 width: 200px;height: 100px;

可以透過 box-sizing 這個屬性來設定元素要採用的計算方式:

box-sizing: content-box | border-box;

常用樣式

知道網頁元素是如何進行排列了,但我們還沒了解 CSS 的真正的能耐,接下來就直接動手做,認識一些常用的樣式屬性。

首先在 HTML 裡新增一個元素:

<div id="test">HELLO<div>

移動位置

  • position:設定元素的定位方式
  • top / bottom / left / right:設定元素移動的距離
position: relative;    //相對定位:相對調整本身的位置
top: 100px;            //向下相對移動 100 pixel

改變顏色

  • color:設定文字顏色
  • background-color:設定背景顏色
color: #FAC9B8;
background-color: #C5DECD;

設定文字

  • font-family:設定字型(找字體可以到 Google Fonts
  • font-size:設定字體大小
  • font-weight:設定字體粗細
  • text-align:設定文字對齊方式
font-family: "Noto Sans CJK TC";
font-size: 28px;
font-weight: bold;  //粗體字
text-align: center;  //文字置中對齊

怎麼樣,是不是跟原本不一樣了呢!這就是 CSS 的魔力,當你熟悉更多樣式屬性,你就能更靈活的美化你的網頁。


小結

今天講到 CSS 的本體 Box Model、還有一些常用的樣式。如果你還想學習更多的屬性,你可以參考 CSS Reference 或是 w3schools-css 網站,上面有詳盡的樣式表還有畫面範例供你學習,建議可以透過邊學邊做的方式,會更容易快速熟悉 CSS 的樣式屬性。明天的文章會進一步提到如何用 CSS 的排版方式之一的 Flexbox,來實現多樣化的網頁佈局,那就下章再會囉!

如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️

參考資料


上一篇
[Day 04 - CSS] 網頁長這樣能看嗎,CSS魔術Show
下一篇
[Day 06 - CSS] Flexbox帶你飛,實現多樣化的網頁佈局
系列文
Follow me! 來一場前端技能樹之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言